<template>
  <div id="login">
    <div class="login-warrp">
      <h2>代付后台管理系统</h2>
      <div id="form">
        <p><i><img src="./user.png" alt=""></i><input type="text" placeholder="请输入用户名" v-model="useName"/></p>
        <p><i><img src="./pass.png" alt=""></i><input type="password" placeholder="输入密码" v-model="password" @keydown.enter="submit"/></p>
        <p v-loading="is_login"><button class="btn-lg" @click="submit">登录</button></p>
        <p><el-checkbox v-model="checked" @change="check_checkbox">记住密码</el-checkbox></p>
      </div>
    </div>

  </div>
</template>

<script>
    export default {
      name: "login",
      data(){
        return{
          is_login: false, // 是否正在登陆
          useName: localStorage.getItem('username') || '', //用户名
          password:localStorage.getItem('password') || '', // 密码
          reg_password:/^[\w\W]{6,18}$/,// 密码
          checked:false
        }
      },
      created(){
        if( localStorage.getItem('username') && localStorage.getItem('password')){
          this.checked = true;
          return false
        }
        this.checked = false;
      },
      methods:{
        submit(){
          if (!this.useName) {
            this.ElementUIMsg({
              message: '用户名不能为空',
              showClose: true,
              duration:2000,
              type:"error"
            });
            return false;
          }

          if (!this.check_password(this.password, this.reg_password)) { // 密码
            // 密码验证不通过
            return false;
          }

          // 加载loading框
          this.is_login = true;
          this.axios.post('index/publics/login', {
            username: this.useName,
            password: this.password
          }).then((res) => {
            // 隐藏loading层
            this.is_login = false;
            if(res.data.code === 1) {
              // 保存token
              localStorage['token'] = res.data.token;
              this.$router.push({
                path: '/index'
              });
            } else {
              this.ElementUIMsg({
                message: res.data.msg,
                showClose: true,
                duration:2000,
                type:"error"
              });
            }
          });
        },
        check_password (pass,reg) { // 验证密码
          if (!pass) {
            this.ElementUIMsg({
              message: '请输入密码',
              showClose: true,
              duration:2000,
              type:"error"
            });
            return false;
          } else if (pass.match(/\s/)) {
            this.ElementUIMsg({
              message: '密码不能含有空格',
              showClose: true,
              duration:2000,
              type:"error"
            });
            return false;
          } else if (!reg.test(pass)) {
            this.ElementUIMsg({
              message: '密码只能是6~18位的数字、大小写字符、下划线',
              showClose: true,
              duration:2000,
              type:"error"
            });
            return false;
          }
          return true;
        },
        check_checkbox(){
          if(this.checked){
            localStorage.setItem('username',this.useName);
            localStorage.setItem('password',this.password);
          }else{
            localStorage.removeItem("username");
            localStorage.removeItem("password");
          }
        }
      }
    }
</script>

<style scoped>
  #login {
    width: 100%;
    height:100%;
    max-height: 100%;
    min-height: 690px;
    min-width: 420px;
    max-width: 100%;
    position:absolute;
    z-index: 100;
    background: url("bg.png") no-repeat top center;
    background-size: cover;
  }
  .login-warrp{
    width: 380px;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
  .login-warrp h2{
    font-size: 40px;
    text-align: center;
    font-weight: 600;
    color: #fff;
    text-shadow: 2px 4px 4px #051d41;
    margin-bottom: 50px;
  }
  #form {
    width: 380px;
    height: 358px;
    padding-top: 20px;
    box-sizing: border-box;
    background: url("from.png") no-repeat;
    background-size: cover;
  }
  #form p{
    width: 270px;
    margin: 0 auto;
    height: 40px;
    border:1px solid #efeff0;
    background-color: #fbfbfc;
  }
  #form p i{
    display: inline-block;
    width: 38px;
    text-align: center;
    vertical-align: middle;
  }
  #form p input {
    width: 230px;
    background: none;
    color: #999999;
    height: 100%;
    font-size: 18px;
    margin-bottom: 20px;
  }

  #form p:first-child {
    margin-top: 45px;
  }
  #form p:last-child{
    background: none;
    border: none;
    margin-top: 10px;
  }
  #form p{
    margin-top: 30px;
  }
  #form p button {
    width: 100%;
    height: 40px;
    padding: 0;
    color: #fff;
    background-color: #2c78fc;
    text-align: center;
    font-size: 18px;
  }
</style>
